<template>
	<view class="page">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">成员管理</block>
			<view slot="right" class="cuIcon-more" @click="onMore"></view>
		</cu-custom>
		<view class="search">
			<uni-search-bar v-model="keywords" placeholder="搜索成员/部门/角色" cancelText="取消" :radius="16" @confirm="onSearch"
				@input="onSearch" />
		</view>
		<view class="select">
			<uni-data-select v-model="company" :localdata="companyList" class="select_company"></uni-data-select>
			<uni-data-select v-model="department" :localdata="departmentList"></uni-data-select>
			<uni-data-select v-model="branch" :localdata="branchList"></uni-data-select>
		</view>
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in navList" :key="index">
				<image class="nav_item_icon" :src="item.icon" mode=""></image>
				<view class="nav_item_label">{{item.label}}</view>
			</view>
		</view>
		<view class="list">
			<list-item v-for="(item,index) in listData" :key="item.id" :options="item"></list-item>
			<uni-load-more v-if="!isLoadEnd || listData.length > 4" :status="loadStatus"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import ListItem from './components/list-item/list-item.vue'
	export default {
		components: {
			ListItem
		},
		data() {
			return {
				company: null,
				companyList: [{
						value: 0,
						text: "福建新华源纺织1"
					},
					{
						value: 1,
						text: "福建新华源纺2"
					},
					{
						value: 2,
						text: "福建新华源纺织3"
					},
				],
				department: null,
				departmentList: [{
						value: 0,
						text: "企管部1"
					},
					{
						value: 1,
						text: "企管部2"
					},
					{
						value: 2,
						text: "企管部3"
					},
				],
				branch: null,
				branchList: [{
						value: 0,
						text: "保安部1"
					},
					{
						value: 1,
						text: "保安部2"
					},
					{
						value: 2,
						text: "保安部3"
					},
				],
				navList: [{
						icon: '/static/logo.png',
						label: '添加成员'
					},
					{
						icon: '/static/logo.png',
						label: '邀请成员'
					},
					{
						icon: '/static/logo.png',
						label: '批量管理'
					},
					{
						icon: '/static/logo.png',
						label: '调整排序'
					}
				],
				keywords: '',
				loadStatus: 'loading',
				isLoadEnd: false,
				listData: [],
				pageParams: {
					pageNo: 1,
					pageSize: 20
				},
			};
		},
		onLoad() {
			this.getListData()
		},
		onPullDownRefresh() {
			this.pageParams.pageNo = 1
			this.getListData()
		},
		onReachBottom() {
			if (this.isLoadEnd) return
			this.pageParams.pageNo++
			this.getListData()
		},
		methods: {
			onMore() {

			},
			onSearch() {
				this.pageParams.pageNo = 1
				this.getListData()
			},
			getListData() {
				this.loadStatus = 'loading'
				this.$http.get("/sys/user/list", {
					params: {
						...this.pageParams,
						username: this.keywords
					}
				}).then(res => {
					if (res.data.success) {
						let list = res.data.result.records
						uni.stopPullDownRefresh()
						// 判断是否加载全部
						if (list.length < this.pageParams.pageSize) {
							this.isLoadEnd = true
							this.loadStatus = 'noMore'
						} else {
							this.loadStatus = 'more'
						}

						if (this.pageParams.pageNo === 1) {
							this.listData = list
							return
						}
						this.listData = this.listData.concat(list)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.l-hover {
		opacity: 0.5;
	}

	.page {
		background: linear-gradient(to bottom, #ffffff, #f5f5f5);
		min-height: 100vh;
	}

	.search {
		padding: 10rpx;
		box-sizing: border-box;
	}

	.select {
		display: flex;
		align-items: center;
		justify-content: space-around;
		gap: 20rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;

		&_company {
			::v-deep .uni-select__selector {
				min-width: 300rpx;
			}
		}
	}

	::v-deep .uni-select {
		border: none;
		background-color: #f5f5f5;
		border-radius: 30rpx;
		width: 220rpx;
	}

	::v-deep .uni-select__input-text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 150rpx;
	}

	.nav {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 15rpx 20rpx;
		box-sizing: border-box;

		&_item {
			display: flex;
			align-items: center;
			flex-direction: column;

			&_icon {
				width: 80rpx;
				height: 80rpx;
			}

			&_label {
				font-size: 28rpx;
				color: #333333;
				font-weight: 700;
			}
		}
	}

	.list {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
</style>